<template>
  <div class="favorite-page">
    <Header />
    
    <PageBanner
      title="我的收藏"
      :breadcrumbs="[
        { title: '首页', path: '/' },
        { title: '我的收藏' }
      ]"
    />
    
    <div class="container">
      <div class="content-wrapper">
        <!-- 头部统计和筛选区域 -->
        <div class="header-section">
          <div class="stats-info">
            <h2 class="section-title">我的收藏</h2>
            <div class="stats-tag">您已收藏 <span class="count-num">{{ favoriteList.length }}</span> 套房源</div>
          </div>
        </div>
        
        <!-- 筛选区域 -->
        <div class="filter-bar">
          <div class="view-switcher">
            <div class="left-section">
              <div class="text-label">排序：</div>
              <div class="sort-options">
                <button 
                  v-for="option in sortOptions" 
                  :key="option.value"
                  :class="['sort-btn', { active: sortType === option.value }]"
                  @click="(event) => handleSortChange(option.value, event)"
                  @mousedown="(event) => event.preventDefault()"
                >
                  <transition name="fade" mode="out-in">
                    <span :key="sortType === option.value" class="btn-text">{{ option.label }}</span>
                  </transition>
                </button>
              </div>
            </div>
            <div class="right-section">
              <div class="total-info">共 <span class="count-num">{{ favoriteList.length }}</span> 套房源</div>
            </div>
          </div>
        </div>
        
        <!-- 收藏列表 -->
        <div class="content-container">
          <!-- 全屏加载时显示 -->
          <div v-if="loading && favoriteList.length === 0" class="loading-wrapper">
            <div class="loading-content">
              <el-skeleton :rows="3" animated />
            </div>
          </div>
          
          <!-- 部分刷新时的遮罩层 -->
          <div v-if="loading && favoriteList.length > 0" class="loading-overlay">
            <div class="spinner-container">
              <div class="spinner"></div>
            </div>
          </div>
          
          <div v-if="!loading && favoriteList.length === 0" class="empty-data">
            <svg-icon name="empty-data" class="empty-icon" />
            <h3>您还没有收藏任何房源</h3>
            <p>浏览房源并点击收藏按钮，将心仪的房源加入收藏</p>
            <el-button type="primary" @click="$router.push('/house')">去浏览房源</el-button>
          </div>
          
          <div v-if="favoriteList.length > 0" class="favorite-list" :class="{ 'is-loading': loading }">
            <transition-group name="card-fade" tag="div" class="transition-container">
              <div v-for="(item, index) in favoriteList" 
                   :key="item.houseId" 
                   class="favorite-item"
                   :style="{ animationDelay: `${index * 0.05}s` }">
                <div class="house-card" @click="viewHouseDetail(item.houseId)">
                  <!-- 房源图片 -->
                  <div class="house-image">
                    <div class="image-placeholder" v-if="!item.imageLoaded"></div>
                    <img 
                      :src="getFullImageUrl(item.coverImage)" 
                      :alt="item.title"
                      @load="item.imageLoaded = true"
                      :class="{ 'image-loaded': item.imageLoaded }"
                    />
                  </div>
                  
                  <!-- 房源信息 -->
                  <div class="house-info">
                    <!-- 标题和价格 -->
                    <div class="house-header">
                      <h3 class="house-title">{{ item.title }}</h3>
                      <div class="house-price">
                        <span class="price-value">¥{{ item.price }}</span>
                        <span class="price-unit">{{ item.priceUnit }}</span>
                      </div>
                    </div>
                    
                    <!-- 地址 -->
                    <div class="house-location">
                      <svg-icon name="location" />
                      <span>{{ `${item.province}${item.city}${item.district}${item.address}` }}</span>
                    </div>
                    
                    <!-- 房屋属性 -->
                    <div class="house-attrs">
                      <div class="attr-item">
                        <span>{{ item.area }}㎡</span>
                      </div>
                      <div class="attr-separator">|</div>
                      <div class="attr-item">
                        <span>{{ item.bedroom }}室{{ item.livingRoom }}厅{{ item.bathroom }}卫</span>
                      </div>
                      <div class="attr-separator">|</div>
                      <div class="attr-item">
                        <span>{{ getPropertyTypeText(item.propertyType) }}</span>
                      </div>
                    </div>
                    
                    <!-- 标签 -->
                    <div class="tags-row" v-if="item.tags && item.tags.length">
                      <span 
                        v-for="(tag, index) in (item.tags || []).slice(0, 3)" 
                        :key="index"
                        class="house-tag"
                      >
                        {{ tag }}
                      </span>
                    </div>
                    
                    <!-- 收藏时间和操作按钮 -->
                    <div class="house-footer">
                      <div class="collect-time-wrapper">
                        <svg-icon name="house/time" class="time-icon" />
                        <div class="time-info">
                          <span class="time-label">收藏于：</span>
                          <span class="time-value">{{ formatTime(item.collectTimeStr || item.collectTime) }}</span>
                        </div>
                      </div>
                      <el-button 
                        size="small" 
                        @click.stop="cancelFavorite(item.houseId)"
                        class="cancel-btn"
                      >
                        <svg-icon name="house/info/star-filled" class="btn-icon" />
                        取消收藏
                      </el-button>
                    </div>
                  </div>
                </div>
              </div>
            </transition-group>
          </div>
        </div>
        
        <!-- 分页器 -->
        <div class="pagination-wrapper" v-if="favoriteList.length > 0">
          <Pagination
            :current-page="currentPage"
            :total="totalCount"
            :page-size="pageSize"
            @update:current-page="handleCurrentChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </div>
    
    <Footer />
  </div>
</template>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, ElSkeleton, ElButton } from 'element-plus'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'
import 'dayjs/locale/zh-cn'
import Header from '@/views/common/Header.vue'
import Footer from '@/views/common/Footer.vue'
import PageBanner from '@/views/common/PageBanner.vue'
import Pagination from '@/views/common/Pagination.vue'
import { getFavoriteList, removeFavorite } from '@/api/favorite'
import { getFullImageUrl } from '@/utils/imageUrl'

// 注册dayjs插件
dayjs.extend(relativeTime)
dayjs.locale('zh-cn')

const router = useRouter()

// 分页参数
const currentPage = ref(1)
const pageSize = ref(10) // 固定为10条每页，因为自定义分页组件不支持改变
const totalCount = ref(0)

// 筛选条件
const sortType = ref('newest')  // 默认按收藏时间排序
const sortOptions = [
  { label: '最新收藏', value: 'newest' },
  { label: '价格从低到高', value: 'price_asc' },
  { label: '价格从高到低', value: 'price_desc' },
  { label: '面积从大到小', value: 'area_desc' },
  { label: '面积从小到大', value: 'area_asc' }
]

// 加载状态
const loading = ref(false)

// 收藏列表数据
const favoriteList = ref([])

// 注册需要使用的组件
const components = {
  ElSkeleton,
  ElButton,
  ElMessageBox
}

// 处理后端返回的数据，转换时间格式
const processHouseData = (item) => {
  // 处理时间字段
  let collectTime = item.collectTime
  let collectTimeStr = item.collectTimeStr
  if (!collectTime && item.createTime) {
    collectTime = item.createTime
  }
  
  // 确保数值类型字段正确转换为数字
  const price = typeof item.price === 'string' ? parseFloat(item.price) : Number(item.price) || 0;
  const area = typeof item.area === 'string' ? parseFloat(item.area) : Number(item.area) || 0;
  
  // 确保数值类型字段正确
  const processedItem = {
    ...item,
    collectTime,
    collectTimeStr,
    title: item.title || item.houseName || '未知房源',
    price, // 使用已转换的数字
    priceUnit: item.priceUnit || '元',
    area, // 使用已转换的数字
    bedroom: Number(item.bedroom) || 0,
    livingRoom: Number(item.livingRoom) || 0,
    bathroom: Number(item.bathroom) || 0,
    tags: Array.isArray(item.tags) ? item.tags : [],
    imageLoaded: false, // 添加图片加载状态标记
    coverImage: item.coverImage // 记录封面图片URL
  }
  
  console.log('处理后的数据:', {
    houseId: processedItem.houseId,
    collectTime: processedItem.collectTime,
    formattedTime: formatTime(processedItem.collectTime),
    price: processedItem.price, // 记录价格
    area: processedItem.area, // 记录面积
    coverImage: processedItem.coverImage // 记录封面图片URL
  })
  
  return processedItem
}

// 获取收藏列表
const loadFavoriteList = async () => {
  // 记录当前滚动位置
  const scrollPosition = window.scrollY;
  
  // 切换排序时只显示loading遮罩，不完全替换内容
  const isReloading = favoriteList.value.length > 0;
  loading.value = true;
  
  try {
    // 确定orderBy和orderDirection参数
    let orderBy, orderDirection;
    
    if (sortType.value === 'newest') {
      // 最新收藏保持不变
      orderBy = 'collectTime';
      orderDirection = 'desc';
    } else if (sortType.value === 'price_asc') {
      orderBy = 'price';
      orderDirection = 'asc';
    } else if (sortType.value === 'price_desc') {
      orderBy = 'price';
      orderDirection = 'desc';
    } else if (sortType.value === 'area_asc') {
      orderBy = 'area';
      orderDirection = 'asc';
    } else if (sortType.value === 'area_desc') {
      orderBy = 'area';
      orderDirection = 'desc';
    }
    
    const params = {
      pageNum: currentPage.value,
      pageSize: pageSize.value,
      orderBy: orderBy,
      orderDirection: orderDirection
    }
    
    console.log('发送请求参数:', params)
    const res = await getFavoriteList(params)
    console.log('收到完整响应:', res)
    
    if (res.code === 200 && res.data) {
      // 检查响应数据结构
      if (!res.data.records) {
        console.error('响应数据格式错误:', res.data)
        throw new Error('响应数据格式错误')
      }
      
      // 检查每条数据的时间字段
      res.data.records.forEach((item, index) => {
        console.log(`第${index + 1}条数据:`, {
          houseId: item.houseId,
          collectTime: item.collectTime,
          createTime: item.createTime,
          updateTime: item.updateTime,
          title: item.title,
          price: item.price
        })
      })

      // 处理数据
      favoriteList.value = (res.data.records || []).map(processHouseData)
      
      // 如果后端排序失效，在前端进行再次排序处理
      if (sortType.value !== 'newest') {
        // 确保数值类型正确
        favoriteList.value.forEach(item => {
          item.price = Number(item.price) || 0;
          item.area = Number(item.area) || 0;
        });
        
        // 根据排序类型对列表进行排序
        favoriteList.value.sort((a, b) => {
          if (sortType.value === 'price_asc') {
            return a.price - b.price;
          } else if (sortType.value === 'price_desc') {
            return b.price - a.price;
          } else if (sortType.value === 'area_asc') {
            return a.area - b.area;
          } else if (sortType.value === 'area_desc') {
            return b.area - a.area;
          }
          return 0;
        });
        
        console.log('前端排序后的列表:', favoriteList.value.map(item => ({
          title: item.title,
          price: item.price,
          area: item.area
        })));
      }
      
      // 更新总数
      totalCount.value = res.data.total || favoriteList.value.length
      
      // 更新页面标题
      document.title = `我的收藏 (${totalCount.value}) - 吉居屋`
      
      // 如果当前页没有数据且不是第一页，则跳转到上一页
      if (favoriteList.value.length === 0 && currentPage.value > 1) {
        currentPage.value--
        await loadFavoriteList()
      }
    } else {
      throw new Error(res.msg || '获取收藏列表失败')
    }
  } catch (error) {
    console.error('获取收藏列表失败:', error)
    ElMessage.error(error.message || '获取收藏列表失败，请稍后重试')
    
    // 如果之前有数据，保留之前的数据，只显示错误提示
    if (favoriteList.value.length === 0) {
      favoriteList.value = []
      totalCount.value = 0
    }
  } finally {
    loading.value = false
    
    // 如果是重新加载数据（如排序切换），保持滚动位置
    if (isReloading) {
      setTimeout(() => {
        window.scrollTo({
          top: scrollPosition,
          behavior: 'auto'
        });
      }, 50);
    }
  }
}

// 取消收藏
const cancelFavorite = async (houseId) => {
  try {
    await ElMessageBox.confirm(
      '确定要取消收藏该房源吗？',
      '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
    )
    
    const res = await removeFavorite(houseId)
    if (res.code === 200) {
      ElMessage.success('取消收藏成功')
      
      // 更新列表
      if (favoriteList.value.length === 1 && currentPage.value > 1) {
        // 如果是当前页的最后一条数据，且不是第一页，则跳转到上一页
        currentPage.value--
      }
      await loadFavoriteList()
    } else {
      throw new Error(res.msg || '取消收藏失败')
    }
  } catch (error) {
    if (error !== 'cancel') {
      console.error('取消收藏失败:', error)
      ElMessage.error(error.message || '取消收藏失败，请稍后重试')
    }
  }
}

// 查看房源详情
const viewHouseDetail = (houseId) => {
  router.push(`/house/${houseId}`)
}

// 处理页码变化
const handleCurrentChange = (page) => {
  currentPage.value = page
  loadFavoriteList()
}

// 根据物业类型获取对应的文本
const getPropertyTypeText = (type) => {
  const typeMap = {
    '1': '住宅',
    '2': '商铺',
    '3': '写字楼'
  }
  return typeMap[type] || '其他'
}

// 格式化时间的函数
const formatTime = (time) => {
  if (!time) {
    console.log('formatTime: 收到空时间')
    return '未知时间'
  }
  
  try {
    console.log('formatTime: 处理时间:', time)
    
    // 处理数组格式的时间
    let date
    if (Array.isArray(time)) {
      // 数组格式：[year, month, day, hour, minute]
      const [year, month, day, hour, minute] = time
      console.log('formatTime: 解析数组时间:', { year, month, day, hour, minute })
      
      // 注意：月份需要补零
      const monthStr = month.toString().padStart(2, '0')
      const dayStr = day.toString().padStart(2, '0')
      const hourStr = hour.toString().padStart(2, '0')
      const minuteStr = minute.toString().padStart(2, '0')
      
      const timeStr = `${year}-${monthStr}-${dayStr} ${hourStr}:${minuteStr}:00`
      console.log('formatTime: 构建的时间字符串:', timeStr)
      
      date = dayjs(timeStr)
    } else if (typeof time === 'string') {
      // 处理字符串格式的时间
      date = dayjs(time)
    } else if (time instanceof Object && time.$d) {
      // 处理已经是dayjs对象的情况
      date = time
    } else if (typeof time === 'number') {
      // 处理时间戳
      date = dayjs(time)
    } else {
      console.error('formatTime: 不支持的时间格式:', time)
      return '时间格式错误'
    }
    
    if (!date.isValid()) {
      console.error('formatTime: 无效的时间格式:', time)
      return '时间格式错误'
    }
    
    const now = dayjs()
    const diffMinutes = now.diff(date, 'minute')
    const diffHours = now.diff(date, 'hour')
    const diffDays = now.diff(date, 'day')
    const diffMonths = now.diff(date, 'month')
    
    let result
    if (diffMinutes < 1) {
      result = '刚刚'
    } else if (diffMinutes < 60) {
      result = `${diffMinutes}分钟前`
    } else if (diffHours < 24) {
      result = `${diffHours}小时前`
    } else if (diffDays < 30) {
      result = `${diffDays}天前`
    } else if (diffMonths < 12) {
      result = date.format('MM-DD HH:mm')
    } else {
      result = date.format('YYYY-MM-DD HH:mm')
    }
    
    console.log('formatTime: 格式化结果:', result)
    return result
  } catch (error) {
    console.error('时间格式化出错:', error, '时间值:', time)
    return '时间格式错误'
  }
}

// 处理排序变化
const handleSortChange = (value, event) => {
  // 如果提供了事件对象，阻止默认行为
  if (event) {
    event.preventDefault();
  }

  // 如果已经是当前排序方式，不做任何操作
  if (sortType.value === value) {
    return;
  }
  
  console.log('排序方式改变:', value) // 添加日志便于调试
  sortType.value = value
  currentPage.value = 1
  loadFavoriteList()
}

// 页面加载时获取收藏列表
onMounted(() => {
  loadFavoriteList()
})
</script>

<style lang="scss" scoped>
.favorite-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  
  .container {
    padding: 40px 60px;
    flex: 1;
    
    .content-wrapper {
      max-width: 1200px;
      margin: 0 auto;
    }
  }
  
  .header-section {
    margin-bottom: 20px;
    
    .stats-info {
      .section-title {
        font-size: 24px;
        font-weight: 600;
        color: #2F3B59;
        margin: 0 0 8px;
      }
      
      .stats-tag {
        color: #6D737A;
        font-size: 14px;
        
        .count-num {
          color: #4A60A1;
          font-weight: 600;
          font-size: 16px;
        }
      }
    }
  }
  
  .filter-bar {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: 24px;
    padding: 16px 24px;
    
    .view-switcher {
      display: flex;
      justify-content: space-between;
      align-items: center;
      
      .left-section {
        display: flex;
        align-items: center;
        
        .text-label {
          font-size: 15px;
          color: #2F3B59;
          font-weight: 500;
          margin-right: 16px;
        }
        
        .sort-options {
          display: flex;
          gap: 10px;
          
          .sort-btn {
            height: 36px;
            padding: 0 16px;
            border: 1px solid #EDEFF6;
            border-radius: 4px;
            background: #fff;
            color: #606266;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.3, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            user-select: none; /* 防止文本选择 */
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            -webkit-tap-highlight-color: transparent; /* 移除移动设备上的点击高亮 */
            touch-action: manipulation; /* 优化触摸操作 */
            overflow: hidden;
            position: relative;
            
            &::after {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              width: 100%;
              height: 0;
              padding-bottom: 100%;
              border-radius: 50%;
              background-color: rgba(74, 96, 161, 0.08);
              transform: translate(-50%, -50%) scale(0);
              opacity: 0;
              transition: transform 0.4s ease-out, opacity 0.4s ease-out;
            }
            
            &:active::after {
              transform: translate(-50%, -50%) scale(1);
              opacity: 1;
              transition: 0s;
            }
            
            .btn-text {
              position: relative;
              z-index: 1;
              transition: all 0.25s ease;
            }
            
            &:hover {
              border-color: #4A60A1;
              color: #4A60A1;
              transform: translateY(-2px);
              box-shadow: 0 2px 8px rgba(74, 96, 161, 0.15);
            }
            
            &.active {
              background: #4A60A1;
              border-color: #4A60A1;
              color: #fff;
              box-shadow: 0 4px 12px rgba(74, 96, 161, 0.25);
            }
          }
        }
      }
      
      .right-section {
        .total-info {
          font-size: 14px;
          color: #606266;
          
          .count-num {
            color: #4A60A1;
            font-weight: 600;
            font-size: 16px;
          }
        }
      }
    }
  }
  
  .content-container {
    min-height: 500px; /* 设置最小高度，避免内容区域跳动 */
    position: relative;
    margin-bottom: 40px; /* 确保底部有足够空间 */
    transition: height 0.3s ease; /* 平滑高度变化 */
  }
  
  .loading-wrapper, .empty-data, .favorite-list {
    width: 100%;
  }
  
  .loading-wrapper {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    min-height: 500px; /* 与content-container一致 */
    
    .loading-content {
      padding: 32px;
    }
  }
  
  .empty-data {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    text-align: center;
    min-height: 500px; /* 与content-container一致 */
    
    .empty-icon {
      font-size: 80px;
      color: #dcdfe6;
      margin-bottom: 24px;
    }
    
    h3 {
      font-size: 18px;
      color: #2F3B59;
      margin: 0 0 12px;
    }
    
    p {
      color: #6D737A;
      margin: 0 0 32px;
      max-width: 300px;
    }
  }
  
  .favorite-list {
    &.is-loading {
      opacity: 0.7;
    }
    
    .transition-container {
      position: relative;
      width: 100%;
    }
    
    .favorite-item {
      margin-bottom: 20px;
      animation: fadeInUp 0.5s ease-out both;
      transition: all 0.3s ease;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      .house-card {
        display: flex;
        background: #fff;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
        cursor: pointer;
        transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
        
        &:hover {
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
          transform: translateY(-4px);
        }
        
        .house-image {
          width: 220px;
          height: 160px;
          flex-shrink: 0;
          overflow: hidden;
          position: relative;
          background-color: #f5f7fa; /* 默认背景色 */
          
          .image-placeholder {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, #f5f7fa 0%, #eaedf1 50%, #f5f7fa 100%);
            background-size: 200% 100%;
            animation: shimmer 1.5s infinite;
          }
          
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
            opacity: 0;
            
            &.image-loaded {
              opacity: 1;
            }
            
            &:hover {
              transform: scale(1.08);
            }
          }
        }
        
        .house-info {
          flex: 1;
          padding: 20px;
          position: relative;
          display: flex;
          flex-direction: column;
          
          .house-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
            
            .house-title {
              font-size: 18px;
              font-weight: 600;
              color: #2F3B59;
              margin: 0;
              flex: 1;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
            
            .house-price {
              flex-shrink: 0;
              text-align: right;
              margin-left: 20px;
              
              .price-value {
                font-size: 18px;
                font-weight: 600;
                color: #f56c6c;
              }
              
              .price-unit {
                font-size: 14px;
                color: #f56c6c;
                margin-left: 2px;
              }
            }
          }
          
          .house-location {
            display: flex;
            align-items: center;
            color: #606266;
            margin-bottom: 10px;
            font-size: 14px;
            
            .svg-icon {
              color: #909399;
              margin-right: 6px;
              flex-shrink: 0;
            }
            
            span {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
          
          .house-attrs {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            font-size: 14px;
            color: #606266;
            
            .attr-item {
              display: flex;
              align-items: center;
            }
            
            .attr-separator {
              margin: 0 8px;
              color: #dcdfe6;
            }
          }
          
          .tags-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 10px;
            
            .house-tag {
              padding: 2px 8px;
              border-radius: 4px;
              font-size: 12px;
              background-color: #f0f2f5;
              color: #606266;
            }
          }
          
          .house-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
            border-top: 1px dashed #EBEEF5;
            padding-top: 10px;
            
            .collect-time-wrapper {
              display: flex;
              align-items: center;
              
              .time-icon {
                margin-right: 6px;
                font-size: 14px;
                color: #909399;
              }
              
              .time-info {
                display: flex;
                flex-direction: column;
                
                .time-label {
                  font-size: 12px;
                  color: #909399;
                }
                
                .time-value {
                  font-size: 13px;
                  color: #606266;
                  font-weight: 500;
                }
              }
            }
            
            .cancel-btn {
              font-size: 13px;
              padding: 6px 12px;
              display: flex;
              align-items: center;
              gap: 4px;
              
              .btn-icon {
                font-size: 14px;
                color: #F56C6C;
              }
              
              &:hover {
                color: #F56C6C;
                border-color: #F56C6C;
                background-color: rgba(245, 108, 108, 0.1);
              }
            }
          }
        }
      }
    }
  }
  
  .pagination-wrapper {
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
}

.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 5;
  opacity: 0;
  animation: fadeIn 0.3s forwards;
  
  .spinner-container {
    display: flex;
    justify-content: center;
    align-items: center;
    
    .spinner {
      width: 40px;
      height: 40px;
      border: 3px solid rgba(74, 96, 161, 0.1);
      border-top: 3px solid #4A60A1;
      border-radius: 50%;
      animation: spin 0.8s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
    }
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

// 按钮文本动画
.fade-enter-active, .fade-leave-active {
  transition: all 0.2s;
}
.fade-enter-from, .fade-leave-to {
  opacity: 0;
  transform: scale(0.9);
}

// 移除Element Plus分页器特有的样式
:deep(.el-pagination) {
  --el-pagination-button-height: 32px;
  --el-pagination-button-width: 32px;
}

// 添加列表项动画
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// 过渡动画
.card-fade-enter-active,
.card-fade-leave-active {
  transition: all 0.5s cubic-bezier(0.5, 0, 0.3, 1);
}

.card-fade-enter-from,
.card-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

.card-fade-move {
  transition: transform 0.5s cubic-bezier(0.5, 0, 0.3, 1);
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
</style> 